<template>
	<view class="content">
		<view class="header-top">
		  <view class="header-top_img header-top_l" @click="MessageNotification">
        <text class="iconfont icon-xiaoxizhongxin header-top_icon"></text>
        <u-badge type="error" count="8" :offset="[-10,-10]"></u-badge>
      </view>
      <view class="header-top_r">
        <view class="header-top_img u-m-r-32">
          <text class="iconfont icon-saoma header-top_icon"></text>
        </view>
        <view class="header-top_img">
          <text class="iconfont icon-shezhi header-top_icon"></text>
        </view>
      </view>
		</view>
    <view style="height: 100rpx;"></view>
    <view class="list-item">
      <view class="list-item__header">
        <view class="list-item__icon">
          <view class="list-item__icon-img">
            <image src="/static/logo.png" mode="scaleToFill" class="img"></image>
          </view>
        </view>
      </view>
      <view class="list-item__content list-item__content--center">
        <text class="list-item__content-title">禁止熬夜</text>
        <text class="list-item__content-note">粉丝：9999 | 关注：11</text>
      </view>
      <view class="list-item__extra">
        <view class="list-item__extra-text"><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
      </view>
    </view>
    <view class="center-item">
      <view class="center-top">
        <view class="center-lv u-flex u-m-b-24">
          <view><uni-rate :touchable="false" v-model="rateValue" color="#bbb" active-color="#333" size="16" disabledColor="#333" disabled /></view>
          <view class="u-m-l-10 u-font-14">银河系会员</view>
        </view>
        <view>
          <view class="u-flex center-top_c">
            <view class="u-flex-1 u-text-center center-top_l" @click="Points()">
              <view class="center-top_b">888</view>
            </view>
            <view class="u-flex-1 u-text-center center-top_r" @click="Bonus()">
              <view class="center-top_b">12</view>
            </view>
          </view>
          <view class="u-flex">
            <view class="u-flex-1 u-text-center">
              <view>积分</view>
            </view>
            <view class="u-flex-1 u-text-center">
              <view>优惠券</view>
            </view>
          </view>
        </view>
      </view>
      <view>
        <view class="home-grids u-m-t-48">
          <view class="home-grid">
            <view class="home-grid_icon" @click="MyActivity">
              <text class="iconfont icon-huodong home-grid_icon_f"></text>
            </view>
            <view class="home-grid_label">我的活动</view>
          </view>
          <view class="home-grid">
            <view class="home-grid_icon" @click="MyOrder">
              <text class="iconfont icon-wodedingdan home-grid_icon_f"></text>
            </view>
            <view class="home-grid_label">我的订单</view>
          </view>
          <view class="home-grid">
            <view class="home-grid_icon" @click="MyCircle">
              <text class="iconfont icon-wodequanzi home-grid_icon_f"></text>
            </view>
            <view class="home-grid_label">我的圈子</view>
          </view>
          <view class="home-grid">
            <view class="home-grid_icon" @click="MyGift">
              <text class="iconfont icon-wodeliquan home-grid_icon_f"></text>
            </view>
            <view class="home-grid_label">我的礼券</view>
          </view>
          <view class="home-grid">
            <view class="home-grid_icon" @click="MyUpvote">
              <text class="iconfont icon-jiabahuo home-grid_icon_f"></text>
            </view>
            <view class="home-grid_label">我的点赞</view>
          </view>
        </view>
        <view class="home-grids u-m-t-48 u-m-b-48">
          <view class="home-grid">
            <view class="home-grid_icon">
              <text class="iconfont icon-wodericheng home-grid_icon_f"></text>
            </view>
            <view class="home-grid_label">我的日程</view>
          </view>
          <view class="home-grid">
            <view class="home-grid_icon" @click="MyPrize">
              <text class="iconfont icon-wodejiangpin home-grid_icon_f"></text>
            </view>
            <view class="home-grid_label">我的奖品</view>
          </view>
          <view class="home-grid">
            <view class="home-grid_icon" @click="MyCollect">
              <text class="iconfont icon-shoucang home-grid_icon_f"></text>
            </view>
            <view class="home-grid_label">我的收藏</view>
          </view>
          <view class="home-grid">
            <view class="home-grid_icon">
              <text class="iconfont icon-wodeyinsi home-grid_icon_f"></text>
            </view>
            <view class="home-grid_label">隐私设置</view>
          </view>
          <view class="home-grid">
            <view class="home-grid_icon" @click="MyComment">
              <text class="iconfont icon-pinglun home-grid_icon_f"></text>
            </view>
            <view class="home-grid_label">我的评论</view>
          </view>
        </view>
      </view>
      <view class="story">
        <view class="story-item" @click="Article">
          <view class="story-item_content">
            <view class="story-item_content-title">品牌故事</view>
            <view class="story-item_content-note">一路走来，感谢有您！资讯的副标题</view>
          </view>
          <view class="list-item__extra">
            <view class="list-item__extra-text"><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
          </view>
        </view>
        <view class="story-item">
          <view class="story-item_content">
            <view class="story-item_content-title">成为[事业合伙人]</view>
            <view class="story-item_content-note">与我们携手，将品牌，带给更多的用户</view>
          </view>
          <view class="list-item__extra">
            <view class="list-item__extra-text"><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
          </view>
        </view>
      </view>
      <view class="u-text-right u-m-b-48" @click="LatestInfo"> >>>更多咨询</view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        rateValue:5,
			}
		},
		onLoad() {

		},
		methods: {
      Points(){
        uni.navigateTo({
        	url: '/pages/Index/Points/Points'
        });
      },
      Article(){
        uni.navigateTo({
        	url: '/pages/Index/Article/index?Name=品牌故事'
        });
      },
      MyActivity(){
        uni.navigateTo({
        	url: '/pages/Index/MyActivity/MyActivity'
        });
      },
      MyUpvote(){
        uni.navigateTo({
        	url: '/pages/Index/MyUpvote/MyUpvote'
        });
      },
      MyOrder(){
        uni.navigateTo({
        	url: '/pages/Index/MyOrder/MyOrder'
        });
      },
      MyGift(){
        uni.navigateTo({
        	url: '/pages/Index/MyGift/MyGift'
        });
      },
      MyCollect(){
        uni.navigateTo({
        	url: '/pages/Index/MyCollect/MyCollect'
        });
      },
      MyPrize(){
        uni.navigateTo({
        	url: '/pages/Index/MyPrize/MyPrize'
        });
      },
      Bonus(){
        uni.navigateTo({
        	url: '/pages/Home/Bonus/Bonus'
        });
      },
      LatestInfo(){
        uni.navigateTo({
        	url: '/pages/Home/LatestInfo/LatestInfo'
        });
      },
      MessageNotification(){
        uni.navigateTo({
        	url: '/pages/Index/MessageNotification/MessageNotification'
        });
      },
      MyCircle(){
        uni.navigateTo({
        	url: '/pages/Index/MyCircle/MyCircle'
        });
      },
      MyComment(){
        uni.navigateTo({
        	url: '/pages/Index/MyComment/MyComment'
        });
      }
		}
	}
</script>

<style lang="scss" scoped>
  .img{
    width: 100%;
    height: 100%;
  }
	.content {
		display: flex;
		flex-direction: column;
    .header-top{
      width: 100%;
      display: flex;
      align-items: center;
      height: 100rpx;
      background-color: #fff;
      padding: 0 32rpx;
      position: fixed;
      z-index: 9;
      .header-top_img{
        width: 56rpx;
        height: 56rpx;
      }
      .header-top_l{
        position: relative;
      }
      .header-top_r{
        margin-left: auto;
        display: flex;
      }
      .header-top_icon{
        font-size: 56rpx;
      }
    }
    .list-item{
      display: flex;
      font-size: 32rpx;
      position: relative;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      cursor: pointer;
      padding: 32rpx;
      .list-item__header {
        display: flex;
        flex-direction: row;
        align-items: center;
        .list-item__icon{
          margin-right: 18rpx;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .list-item__icon-img{
              display: block;
              height: 120rpx;
              width: 120rpx;
              margin-right: 20rpx;
              border-radius: 50%;
              overflow: hidden;
          }
        }
      }
      .list-item__content{
        display: flex;
        padding-right: 16rpx;
        flex: 1;
        color: #3b4144;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        .list-item__content-title{
          font-size: 28rpx;
          color: #3b4144;
          overflow: hidden;
        }
        .list-item__content-note{
          margin-top: 6rpx;
          // color: #999;
          font-size: 24rpx;
          overflow: hidden;
        }
      }
      .list-item__extra{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        .list-item__extra-text{
          color: #999;
          font-size: 24rpx;
        }
      }
    }
    
    .center-item{
      padding: 0 32rpx;
    }
    .center-top{
      width: 100%;
      height: 220rpx;
      background-color: $supernut-color;
      padding: 24rpx;
      border-radius: 28rpx;
      .center-top_l{
        padding: 16rpx 0;
        border-right: 4rpx solid;
      }
      .center-top_r{
        padding: 16rpx 0;
      }
      .center-top_b{
        font-size: 40rpx;
      }
    }
    .home-grids {
      display: flex;
      flex-direction: row;
      align-items: center;
      overflow: hidden;
      padding: 0rpx 24rpx;
      .home-grid {
        flex: 1;
        box-sizing: border-box;
        .home-grid_icon {
          width: 64rpx;
          height: 64rpx;
          margin: 0 auto;
          margin-bottom: 4px;
          .home-grid_icon_f{
            font-size: 64rpx;
          }
        }
        .home-grid_label {
          display: block;
          text-align: center;
          color: rgba(0,0,0,0.9);
          font-size: 28rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .home-grid__icon+.home-grid_label {
            margin-top: 8rpx;
        }
      }
    }
    .story-item{
      display: flex;
      position: relative;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      cursor: pointer;
      height: 200rpx;
      padding: 32rpx;
      margin: 32rpx 0;
      background-image: url('https://cdn.uviewui.com/uview/swiper/1.jpg');
      border-radius: 28rpx;
      overflow: hidden;
      .story-item_content{
        display: flex;
        padding-right: 16rpx;
        flex: 1;
        color: #fff;
        flex-direction: column;
        justify-content: flex-end;
        overflow: hidden;
        height: 100%;
        .story-item_content-title{
          font-size: 32rpx;
          overflow: hidden;
        }
        .story-item_content-note{
          margin-top: 6rpx;
          font-size: 24rpx;
          overflow: hidden;
        }
      }
    }
  }
</style>
